<template>
<div>
      <HeadNav></HeadNav>
  <div class="box">
     <div class="left_nav">
      <ul>
        <li>
          <svg
            t="1641701518755"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2725"
            width="24"
            height="18"
          >
            <path
              d="M919.2 419.2L531.2 141.6c-11.2-8-26.4-8-36.8 0L104 419.2c-12.8 8.8-6.4 28.8 9.6 28.8H192v432c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V640h192v240c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V448h78.4c15.2 0 21.6-20 8.8-28.8z"
              p-id="2726"
            ></path>
          </svg>
          订单管理
        </li>
        <li>
          <svg
            t="1641701816576"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3651"
            width="24"
            height="18"
          >
            <path
              d="M879.914071 232.077336c10.998926 0 19.998047 8.999121 19.998047 19.998047v519.949224c0 10.998926-8.999121 19.998047-19.998047 19.998047H143.985939c-10.998926 0-19.998047-8.999121-19.998047-19.998047v-519.949224c0-10.998926 8.999121-19.998047 19.998047-19.998047h735.928132m0-59.994141H143.985939c-44.195684 0-79.992188 35.796504-79.992188 79.992188v519.949224c0 44.195684 35.796504 79.992188 79.992188 79.992188h735.928132c44.195684 0 79.992188-35.796504 79.992188-79.992188v-519.949224c0-44.195684-35.796504-79.992188-79.992188-79.992188z"
              p-id="3652"
            ></path>
            <path
              d="M606.540768 661.035446l-229.27761-92.990919-233.277219 161.984181v41.995899h735.928132v-376.963187z"
              p-id="3653"
            ></path>
            <path
              d="M290.971585 352.065619c22.097842 0 39.996094 17.898252 39.996094 39.996094s-17.898252 39.996094-39.996094 39.996094-39.996094-17.898252-39.996094-39.996094 17.898252-39.996094 39.996094-39.996094m0-59.994142c-55.19461 0-99.990235 44.795625-99.990236 99.990236s44.795625 99.990235 99.990236 99.990235 99.990235-44.795625 99.990235-99.990235-44.795625-99.990235-99.990235-99.990236z"
              p-id="3654"
            ></path>
          </svg>
          发票管理
        </li>
        <li>
          <svg
            t="1641701990419"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2636"
            width="24"
            height="18"
          >
            <path
              d="M819.2 998.4H358.4c-42.496 0-76.8-34.304-76.8-76.8V128C281.6 85.504 315.904 51.2 358.4 51.2h460.8c42.496 0 76.8 34.304 76.8 76.8V921.6c0 42.496-34.304 76.8-76.8 76.8zM358.4 102.4c-14.336 0-25.6 11.264-25.6 25.6V921.6c0 14.336 11.264 25.6 25.6 25.6h460.8c14.336 0 25.6-11.264 25.6-25.6V128c0-14.336-11.264-25.6-25.6-25.6H358.4z"
              p-id="2637"
            ></path>
            <path
              d="M407.552 998.4H153.6c-42.496 0-76.8-34.304-76.8-76.8v-384C76.8 495.104 111.104 460.8 153.6 460.8h153.6v51.2H153.6c-14.336 0-25.6 11.264-25.6 25.6V921.6c0 14.336 11.264 25.6 25.6 25.6h253.952v51.2z"
              p-id="2638"
            ></path>
            <path
              d="M588.8 307.2h-153.6c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h153.6c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM640 460.8h-204.8c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h204.8c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM742.4 614.4h-307.2c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h307.2c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM742.4 768h-307.2c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h307.2c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z"
              p-id="2639"
            ></path>
          </svg>
          售后服务
        </li>
      </ul>
    </div>
       <div class="right_nav">
      <div class="header">
        <p>后台首页 <i></i> <span>商品列表</span></p>
      </div>
      <div class="head">
        <ul>
          <li>全部</li>
          <li>待付款</li>
          <li>待发货</li>
          <li>已发货</li>
          <li>已收货</li>
          <li>已完成</li>
          <li>已关闭</li>
          <li>退款中</li>
        </ul>
      </div>
      <div class="operation">
        <div class="left">
          <span>发布商品</span>
          <span>批量删除</span>
        </div>
        <div class="right">
          <input type="text" placeholder="要搜索的商品名称" />
          <span>搜索</span>
          <span>高级搜索</span>
        </div>
      </div>
      <div class="main_box">
        <div class="top_header">
          <section>
            <input type="checkbox" />
          </section>
          <section>商品</section>
          <section>实付款</section>
          <section>买家</section>
          <section>支付方式</section>
          <section>配送方式</section>
          <section>交易状态</section>
          <section>操作</section>
        </div>
        <ul>
          <li>
         <section>
            <input type="checkbox" />
          </section>
          <section>
              <div class="box">
                  <div class="left">
                      <p>订单编号</p>
                      <p>2432342342342342342</p>
                  </div>
                  <div class="right">
                      <p>下单时间</p>
                      <p>2021-120-12 12:00:00</p>
                  </div>
                <p>
                  该商品已被删除
             </p>
              </div>
          </section>
          <section>
              ￥0.85 <br>
(含运费：￥0.00)
          </section>
          <section>
              user <br>
(用户id：3)
          </section>
          <section><span>
              未支付
              </span></section>
          <section><span>
              未配送
              </span></section>
          <section>
              <p>付款状态 <span>未付款</span></p>
              <p>发货状态 <span>未发货</span></p>
              <p>收货状态 <span>未收货</span></p>

          </section>
          <section>订单详情</section>
          </li>
          <li>
         <section>
            <input type="checkbox" />
          </section>
          <section>
              <div class="box">
                  <div class="left">
                      <p>订单编号</p>
                      <p>2432342342342342342</p>
                  </div>
                  <div class="right">
                      <p>下单时间</p>
                      <p>2021-120-12 12:00:00</p>
                  </div>
                <p>
                  该商品已被删除
             </p>
              </div>
          </section>
          <section>
              ￥0.85 <br>
(含运费：￥0.00)
          </section>
          <section>
              user <br>
(用户id：3)
          </section>
          <section><span>
              未支付
              </span></section>
          <section><span>
              未配送
              </span></section>
          <section>
              <p>付款状态 <span>未付款</span></p>
              <p>发货状态 <span>未发货</span></p>
              <p>收货状态 <span>未收货</span></p>

          </section>
          <section>订单详情</section>
          </li>
          <li>
         <section>
            <input type="checkbox" />
          </section>
          <section>
              <div class="box">
                  <div class="left">
                      <p>订单编号</p>
                      <p>2432342342342342342</p>
                  </div>
                  <div class="right">
                      <p>下单时间</p>
                      <p>2021-120-12 12:00:00</p>
                  </div>
                <p>
                  该商品已被删除
             </p>
              </div>
          </section>
          <section>
              ￥0.85 <br>
(含运费：￥0.00)
          </section>
          <section>
              user <br>
(用户id：3)
          </section>
          <section><span>
              未支付
              </span></section>
          <section><span>
              未配送
              </span></section>
          <section>
              <p>付款状态 <span>未付款</span></p>
              <p>发货状态 <span>未发货</span></p>
              <p>收货状态 <span>未收货</span></p>

          </section>
          <section>订单详情</section>
          </li>
          <li>
         <section>
            <input type="checkbox" />
          </section>
          <section>
              <div class="box">
                  <div class="left">
                      <p>订单编号</p>
                      <p>2432342342342342342</p>
                  </div>
                  <div class="right">
                      <p>下单时间</p>
                      <p>2021-120-12 12:00:00</p>
                  </div>
                <p>
                  该商品已被删除
             </p>
              </div>
          </section>
          <section>
              ￥0.85 <br>
(含运费：￥0.00)
          </section>
          <section>
              user <br>
(用户id：3)
          </section>
          <section><span>
              未支付
              </span></section>
          <section><span>
              未配送
              </span></section>
          <section>
              <p>付款状态 <span>未付款</span></p>
              <p>发货状态 <span>未发货</span></p>
              <p>收货状态 <span>未收货</span></p>

          </section>
          <section>订单详情</section>
          </li>
          <li>
         <section>
            <input type="checkbox" />
          </section>
          <section>
              <div class="box">
                  <div class="left">
                      <p>订单编号</p>
                      <p>2432342342342342342</p>
                  </div>
                  <div class="right">
                      <p>下单时间</p>
                      <p>2021-120-12 12:00:00</p>
                  </div>
                <p>
                  该商品已被删除
             </p>
              </div>
          </section>
          <section>
              ￥0.85 <br>
(含运费：￥0.00)
          </section>
          <section>
              user <br>
(用户id：3)
          </section>
          <section><span>
              未支付
              </span></section>
          <section><span>
              未配送
              </span></section>
          <section>
              <p>付款状态 <span>未付款</span></p>
              <p>发货状态 <span>未发货</span></p>
              <p>收货状态 <span>未收货</span></p>

          </section>
          <section>订单详情</section>
          </li>
        </ul>
      </div>
      <footer>
          <p><span>共5条</span>
            <span>10条/页</span>
            <span><</span>
            <span>1</span>
            <span>></span>
            <span>前往</span>
            <span>10</span>
            <span>页</span>   
          </p>
      </footer>
    </div>
  </div>
</div>
</div>

   
</template>
<script>
import HeadNav from "../../components/HeaderNav.vue";
export default {
  components: {
    HeadNav,
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.left_nav {
  width: 190px;
  height: 865px;
  border-right: 1px solid rgb(223, 223, 223);
}
.left_nav > ul li {
  padding: 20px;
  font-size: 14px;
  vertical-align: top;
}
.left_nav > ul li:hover {
  background: rgb(240, 240, 240);
}
.right_nav {
  width: 100%;
}
.right_nav .header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgb(223, 223, 223);
  padding: 20px;
}
.right_nav .header p {
  color: #000;
  font-weight: 700px;
  font-size: 16px;
}
.right_nav .header p span {
  font-weight: 400px;
  color: rgb(161, 161, 161);
  padding-left: 10px;
}
.right_nav .header p i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-color: transparent transparent #ccc #ccc;
  transform: rotate(225deg);
}
.right_nav .head {
  width: 100%;
  height: 40px;
  padding: 0 20px;
}
.right_nav .head ul {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.right_nav .head ul li {
  float: left;
  height: 100%;
  line-height: 40px;
  margin-right: 30px;
  font-size: 14px;
}
.right_nav .head ul li:hover {
  color: rgb(66, 110, 75);
}
.right_nav .operation {
  height: 60px;
  padding: 0 20px;
}
.right_nav .operation .left {
  float: left;
  height: 60px;
  line-height: 60px;
}
.right_nav .operation .left span {
  padding: 5px 15px;
  border-radius: 5px;
}
.right_nav .operation .left span:nth-child(1) {
  color: #fff;
  background: rgb(121, 187, 121);
}
.right_nav .operation .left span:nth-child(2) {
  color: #fff;
  background: rgb(243, 121, 121);
}
.right_nav .operation .left span:nth-child(3) {
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .left span:nth-child(4) {
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .right {
  float: right;
  height: 60px;
  line-height: 60px;
}
.right_nav .operation .right input {
  width: 200px;
  height: 28px;
  border: 1px solid rgb(153, 153, 153);
  border-radius: 5px;
  padding-left: 20px;
  color: #ccc;
}
.right_nav .operation .right span {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .right span:nth-child(2) {
  background: rgb(163, 163, 163);
  color: #fff;
}
.right_nav .main_box .top_header {
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 60px;
}
.right_nav .main_box .top_header input {
  -webkit-appearance: checkbox;
}
.right_nav .main_box .top_header section {
  float: left;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  color: rgb(98, 98, 98);
}
.right_nav .main_box .top_header section:nth-child(1) {
  width: 80px;
  line-height: 60px;
  text-align: center;
}
.right_nav .main_box .top_header section:nth-child(2) {
  width: 420px;
  line-height: 60px;
  padding: 0 30px;
  padding-left: 20px;
}
.right_nav .main_box .top_header section:nth-child(3) {
  width: 150px;
  text-align: center;
  padding: 10px 30px;
  height: 60px;
}
.right_nav .main_box .top_header section:nth-child(4) {
  width: 120px;
  height: 60px;
  text-align: center;
  padding: 10px 20px;
}
.right_nav .main_box .top_header section:nth-child(5) {
  width: 200px;
  text-align: center;
  line-height: 60px;
  padding: 0 30px;
}
.right_nav .main_box .top_header section:nth-child(6) {
  width: 170px;
  text-align: center;
  line-height: 60px;
  padding: 0 30px;
}
.right_nav .main_box .top_header section:nth-child(7) {
  width: 211px;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}
.right_nav .main_box .top_header section:nth-child(8) {
  width: 10%;
  text-align: center;
  line-height: 60px;
  border: none;
}
.right_nav .main_box {
  padding: 20px;
}
.right_nav .main_box li {
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 100px;
}
.right_nav .main_box li input {
  -webkit-appearance: checkbox;
}
.right_nav .main_box li section {
  float: left;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  height: 100%;
  color: rgb(98, 98, 98);
}
.right_nav .main_box li section:nth-child(1) {
  width: 80px;
  text-align: center;
}

.right_nav .main_box li section:nth-child(2) {
  width: 420px;
  line-height: 60px;
  padding: 0 30px;
  padding-left: 20px;
}
.right_nav .main_box li section:nth-child(2) .box {
  padding: 10px;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.right_nav .main_box li section:nth-child(2) .box .left {
  width: 45%;
  height: 50px;
}
.right_nav .main_box li section:nth-child(2) .box .right {
  width: 45%;
  height: 50px;
}
.right_nav .main_box li section:nth-child(2) .box p {
  height: px;
  line-height: 20px;
}
.right_nav .main_box li section:nth-child(2) .box > p {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-color: #ccc transparent #ccc transparent;
}
.right_nav .main_box li section:nth-child(3) {
  width: 150px;
  text-align: center;
  padding: 20px 0px;
  font-size: 12px;
}
.right_nav .main_box li section:nth-child(4) {
  width: 120px;
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
}
.right_nav .main_box li section:nth-child(5) {
  width: 200px;
  text-align: center;
  padding: 30px;
}
.right_nav .main_box li section:nth-child(5) span {
  background: rgb(105, 105, 105);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
}
.right_nav .main_box li section:nth-child(6) {
  width: 170px;
  text-align: center;
  padding: 30px;
}
.right_nav .main_box li section:nth-child(6) span {
  background: rgb(105, 105, 105);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
}
.right_nav .main_box li section:nth-child(7) {
  width: 211px;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}
.right_nav .main_box li section:nth-child(7) p {
  font-size: 12px;
  line-height: 20px;
}
.right_nav .main_box li section:nth-child(7) p span {
  background: rgb(105, 105, 105);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  padding: 0px 10px;
}
.right_nav .main_box li section:nth-child(8) {
  width: 10%;
  text-align: center;
  line-height: 100px;
  border: none;
  color: rgb(67, 187, 67);
}
footer {
  position: fixed;
  background: #fff;
  right: 0;
  bottom: 0;
  width: 90%;
  height: 100px;
  border-top: 1px solid rgb(192, 192, 192);
  padding-top: 20px;
}
footer span {
  padding: 5px 10px;
  border-radius: 5px;
}
footer span:nth-child(2) {
  border: 1px solid #ccc;
}
footer span:nth-child(4) {
  color: rgb(27, 68, 41);
  font-weight: 700;
}
footer span:nth-child(7) {
  border: 1px solid #ccc;
}
</style>